<template>
  <div class="navigation">
    <div class="top"></div>
    <div class="menu">
      <ul>
        <li><router-link to="">首页</router-link></li>
        <li><router-link to="">全部商品</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Navigation",
    data () {
      return {

      }
    }
  }

</script>

<style scoped>
  ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .top{
    width: 100%;
    height: 58px;
    background-color: #000;
  }
  .menu{
    width: 100%;
    height: 74px;
    background-color: #FFF;
  }
  .menu ul{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .menu ul li {
    flex: 1;
    text-align: center;
  }
  .menu ul li a{
    color: #333;
    text-decoration: none;
  }
</style>